<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-4.1.3-dist/css/bootstrap.min.css' %}">
    <link href="{% static 'bootstrap-combined.min.css' %}" rel="stylesheet">
    <link href="{% static 'layoutit.css'%}" rel="stylesheet">
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="{% static 'jquery/jquery-3.5.0.min.js' %}"></script>
    <script src="{% static 'popper/popper.js' %}"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="{% static 'bootstrap-4.1.3-dist/js/bootstrap.min.js' %}"></script>
    <!-- 引入layer.js -->
    <script src="{% static 'layer/layer.js' %}"></script>
</head>
<body>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span1">
		</div>
		<div class="span8">
			<div class="hero-unit">
				<h1>
					你好, {{ user.user_name }}!
				</h1>
                <div>&nbsp;</div>
				<p>
					这是您的个人主页, 您可以在此编辑您的个人信息, 也可以在此查看您所参与的问题讨论。点击编辑以编辑您的个人信息。
				</p>
			</div>
			<ul class="nav nav-tabs">
				<li>
					<a href="">个人信息</a>
				</li>
				<li>
					<a href="#">参与的讨论</a>
				</li>
				<li class="active">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">编辑</a>
					<ul class="dropdown-menu">
						<li class="active">
							<a>编辑个人信息</a>
					</ul>
				</li>
			</ul>
			<div class="row-fluid">
				<div class="span3">
                    {% csrf_token %}
                    {% if user.avatar %}
					    <img width="170" height="170" src="{{ user.avatar.url }}" class="img-circle"/>
                    {% else %}
                        <h5>暂无头像</h5>
                    {% endif %}
				</div>
				<div class="span9">
					<div class="page-header">
						<h1>
							{{ user.user_name }} <small> 关于你的个人信息  </small>
						</h1>
					</div>
                    <form method="post" action="" enctype="multipart/form-data">
                        {% csrf_token %}
					    <p class="form-group">
                            <textarea cols="400" rows="4" style="width: 488px" name="bio">{{ user.bio }}</textarea>
					    </p>
					    <div class="form-group">
                            <p><big><cite><strong>性别</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" value="{{ user.sex }}" style="height: 30px" name="sex"></cite></big></p>
                        </div>
                        <div class="form-group">
                            <p><big><cite><strong>年级</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" value="{{ user.grade }}" style="height: 30px" name="grade"></cite></big></p>
                        </div>
                        <div class="form-group">
                            <p><big><cite><strong>学院</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" value="{{ user.college }}" style="height: 30px" name="college"></cite></big></p>
                        </div>
                        <div class="form-group">
                            <p><big><cite><strong>专业</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" value="{{ user.major }}" style="height: 30px" name="major"></cite></big></p>
                        </div>
                        <div class="form-group">
                            <p><big><cite><strong>电子邮箱</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" value="{{ user.email }}" style="height: 30px" name="email"></cite></big></p>
                        </div>
                        <div class="form-group">
                            <p><big><cite><strong>上传头像</strong></cite></big></p>
                            <a> </a>
                            <input type="file" class="form-control-file" name="avatar" id="avatar">
                        </div>
                        <div>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="submit" class="btn btn-primary float-none">确认修改</button>
                        </div>
                    </form>
				</div>
			</div>
		</div>
		<div class="span2">
		</div>
	</div>
</div>

</body>
</html>